<template>
	<div class="nav">
		<div class="header-top">
			<span class="welcome-wt">我图网欢迎您，专注正版设计作品交易平台</span>
			<div class="clearfix">
				<div class="login-box">
					
					<a href="" class="common">请登录</a>
					
				</div>
				<div class="register">
					<a href="" class="common">免费注册</a>

				</div>
				<div class="recharge-top">
					<a href="" class="common">充值</a>
				</div>
				<div class="link-vip">
					<a href="" class="common">特惠VIP<span class="one">1</span></a>
					
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	export default {

	}
	
</script>

<style lang="less" rel="stylesheet/less">
	.nav {
		position: relative;
		width: 100%;
		height: 32px;
		background: #f2f2f2;
		font-size: 12px;
		z-index: 800;
		.header-top {
			width: 1200px;
			margin: 0 auto;
			line-height: 32px;
			.welcome-wt {
				display: inline-block;
			}
			.clearfix {
				display: inline-block;
				float: right;
				.login-box,
				.register,
				.recharge-top,
				.link-vip {
					display: inline-block;
					.common {
						width: 48px;
						height: 17px;
						
						text-decoration: none;
					}
				}
				.login-box {
					.common {						
						color: rgb(255, 114, 0);
						padding: 0 22px;
						&:hover{
							color: rgb(0,175,109);
						}
					}
				}
				.register {
					.common {
						border-left: 1px solid rgb(115, 115, 115);
						color: rgb(115, 115, 115);
						padding: 0 22px;
						&:hover{
							color: rgb(0,175,109);
						}
					}
				}
				.recharge-top {
					.common {
						border-left: 1px solid rgb(115, 115, 115);
						color: rgb(115, 115, 115);
						padding: 0 22px;
						&:hover{
							color: rgb(0,175,109);
						}
					}
				}
				.link-vip {
					.common {
						border-left: 1px solid rgb(115, 115, 115);
						color: rgb(115, 115, 115);
						padding: 0 0 0 22px;
						.one{
							padding: 0 3px;
							color: white;
							background: rgb(255,114,0);
							border-radius: 4px;
						}
						&:hover{
							color: rgb(0,175,109);
						}
					}
				}
			}
		}
	}
</style>